<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui/css/style.css" />
	<link rel="stylesheet" type="text/css" href="../lib/jqueryPage/paging.css" />
	<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script>
	<script type="text/javascript" src="../lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript" src="../lib/laypage/1.2/laypage.js"></script>
	<script src="../lib/jrender.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../lib/jqueryPage/paging.min.js"></script>
	<script type="text/javascript" src="../lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script src="../lib/ajaxfileupload.js"></script>
	<script src="../js/config.js"></script>
	<title>代付设置</title>
	<script>
		$.views.converters("timeFilter", function (val) {
			var fmt = "yyyy-MM-dd hh:mm:ss";
			var data = new Date(val);
			var o = {
				"M+": data.getMonth() + 1, //月份 
				"d+": data.getDate(), //日 
				"h+": data.getHours(), //小时 
				"m+": data.getMinutes(), //分 
				"s+": data.getSeconds(), //秒 
				"q+": Math.floor((data.getMonth() + 3) / 3), //季度 
				"S": data.getMilliseconds() //毫秒 
			};

			if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (data.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" +
					o[k]).substr(("" + o[k]).length)));
			return fmt;
		});

		$.views.converters("sxNumFilter", function (val) {
			if (val) {
				return val / 100;
			} else {
				return '';
			}
		});

		$.views.converters("orderNumFilter", function (val) {
			if (val) {
				return val / 100;
			} else {
				return '';
			}
		});
	</script>
</head>

<body>
	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i> 首页
		<span class="c-gray en">&gt;</span> 代付管理
		<span class="c-gray en">&gt;</span> 批量代付
		<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);"
		    title="刷新">
			<i class="Hui-iconfont">&#xe68f;</i>
		</a>
	</nav>
	<div class="page-container">
		<h3>批量代付</h3>
		<div class="cl pd-5 bg-1 bk-gray">
			<span class="l">
				<button class="btn btn-primary radius" data-title="下载代付模板" id="download-btn">
					<i class="Hui-iconfont">&#xe640;</i> 下载代付模板</button>
			</span>
		</div>
		<div class="mt-20">
			<form class="form form-horizontal mt-20">

				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">
						<span class="c-red">*</span>上传模板：</label>
					<div class="formControls col-xs-4 col-sm-5">
						<input type="file" class="input-text" placeholder="上传模板" id="file" name="file">
					</div>
				</div>

				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">
						<span class="c-red">*</span>代付方式：</label>
					<div class="formControls col-xs-4 col-sm-5">
						<span class="select-box inline">
							<select name="" class="select" id="daifu-type">
								<option value="账户余额" selected>账户余额</option>
							</select>
						</span>
					</div>
				</div>
			</form>

		</div>

		<div class="mt-20">
			<h3>上传的代付列表</h3>
			<table class="table table-border table-bordered table-bg table-sort table-responsive">
				<thead>
					<tr class="text-c">
						<th width="">账户名称</th>
						<th width="">身份证号</th>
						<th width="">金额</th>
						<th width="">开户行名称</th>
						<th width="">卡号</th>
						<th>订单状态</th>
					</tr>
				</thead>
				<script type="text/x-jsrender" id="j-specCard">
					{{for data}}
					<tr class="text-c" {{if isType!=1 }} style="background-color: #ff7c7c;color:#fff;" {{/if}}>
						<td>{{:payee_name}}</td>
						<td>{{:payee_cert_no}}</td>
						<td>{{:orderNum}}</td>
						<td>{{:payee_ba_bank_name}}</td>
						<td>{{:payee_ba_mumber}}</td>
						<td>
							{{if isType == 1}} 可用 {{else}} 不可用 {{/if}}
						</td>
					</tr>
					{{/for}}
					<tr class="text-c" style="background-color: #f5fafe;">
						<td>代付条数：{{:daiFuAcount}}</td>
						<td>订单总金额：{{:orderNum}}</td>
						<td>手续费：{{:shouxufeiSum}}</td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</script>

				<script type="text/x-jsrender" id="j-specCard2">
					{{for data}}
					<tr class="text-c" {{if isType!=1 }} style="background-color: #ff7c7c;color:#fff;" {{/if}}>
						<td>{{:payee_name}}</td>
						<td>{{:payee_cert_no}}</td>
						<td>{{orderNumFilter:orderNum}}</td>
						<td>{{:payee_ba_bank_name}}</td>
						<td>{{:payee_ba_mumber}}</td>
						<td>
							{{if isType == 1}} 成功 {{else isType==2}} 订单不可用 {{else isType==3}} 申请失败 {{else}} 失败 {{/if}}
						</td>
					</tr>
					{{/for}}
				</script>
				<tbody class="j-specCard-box">

				</tbody>
			</table>
		</div>
		<div class="mt-20" style="text-align:center;">
			<button class="btn btn-primary radius " id="confirmpayment">确认代付</button>
		</div>
	</div>
	<pre>
		<b>支持的银行:</b>中国工商银行，中国农业银行，中国银行，中国建设银行，交通银行，邮政储蓄银行，中信银行，光大银行，华夏银行，民生银行，平安银行，招商银行，上海银行，兴业银行，北京银行，上海农商银行，北京农商银行
	</pre>
	<script type="text/javascript">
		$(function () {
			// 下载模板
			$('#download-btn').on('click', function () {
				window.open($.webConfig.basicUrl + '/chuyangPay/file/down');
			});
			// 上传xls
			$('#file').on('change', function () {
				var index = layer.load(1, {
					shade: [0.1, '#000'] //0.1透明度的白色背景
				});

				var str = $(this)[0].files[0].name;
				if (str.indexOf("xls") < 0 && str.indexOf("xlsx") < 0) {
					alert("请选择格式为.xls或.xlsx的文件！");
					return false;
				}
				var formData = new FormData();
				formData.append("file", $(this)[0].files[0]);
				$.ajax({
					type: 'POST',
					url: $.webConfig.basicUrl + '/chuyangPay/file/upload',
					data: formData,
					processData: false,
					contentType: false,
					cache: false,
					mimeType: "multipart/form-data",
					dataType: 'json',
					success: function (data) {
						console.log(data);
						if (data['code'] == 200) {
							layer.close(index);
							jsRenderTpl = $.templates('#j-specCard');
							finalTpl = jsRenderTpl(data);
							$('.j-specCard-box').html(finalTpl);
							$.fileUrl = data['fileUrl'];
						} else {
							layer.close(index);
							console.log(data);
							layer.alert(data['msc']);
						}
					},
					error: function (err) {
						layer.close(index);
						console.log(err);
					}
				});
			});

			$('#confirmpayment').on('click', function () {
				var account = $.cookie('user__userName');
				var md5 = $.cookie('user__code');
				if (!$.fileUrl) {
					layer.alert('请先上传模板');
					return false;
				}
				layer.prompt({
					title: '请输入登录密码，并确认',
					formType: 1
				}, function (pass, index) {
					layer.close(index);
					var index = layer.load(1, {
						shade: [0.1, '#000'] //0.1透明度的白色背景
					});
					$.ajax({
						type: 'POST',
						url: $.webConfig.basicUrl + '/chuyangPay/chuyangPay/chuYangBatchPaid',
						data: {
							account: account,
							md5: md5,
							exelurl: $.fileUrl,
							pwd: pass
						},
						dataType: 'json',
						success: function (data) {
							console.log(data);
							layer.close(index);
							if (data['code'] == 200) {
								jsRenderTpl = $.templates('#j-specCard2');
								finalTpl = jsRenderTpl(data);
								$('.j-specCard-box').html(finalTpl);
								layer.alert(data['msc']);
							} else {
								layer.close(index);
								layer.alert(data['msc']);
							}
						},
						error: function (err) {
							layer.close(index);
							layer.alert('服务器出小差咯...');
							console.log(err);
						}
					});
				});
			});
		});
	</script>
</body>

</html>